import React from "react";
import { Card, Row, Col, Form, Input, Button, message, Icon, Checkbox, Radio, InputNumber, Select, Switch, DatePicker, TimePicker, Upload } from "antd";
import moment from "moment";
import { FormComponentProps } from "antd/lib/form/Form"; //获取Form表单的interface
import { FormItemProps } from "antd/lib/form/FormItem"; //获取FormItem表单的interface
import { UploadFile, UploadChangeParam } from "antd/lib/upload/interface"; //获取FormItem表单的interface

import "./index.less";

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { Option } = Select;
const TextArea = Input.TextArea;

interface IProp {}
interface IState {
	loading: boolean;
	imageUrl: string;
}

class RegisterForm extends React.Component<IProp & FormComponentProps, IState> {
	constructor(props: IProp & FormComponentProps, state: IState) {
		super(props, state);
		this.state = {
			loading: false,
			imageUrl: ""
		};
	}

	getBase64 = (img: any, callback: Function) => {
		const reader = new FileReader();
		reader.addEventListener("load", () => callback(reader.result));
		reader.readAsDataURL(img);
	};

	handleChange = (info: UploadChangeParam) => {
		if (info.file.status === "uploading") {
			this.setState({ loading: true });
			return;
		}
		if (info.file.status === "done") {
			// Get this url from response in real world.
			// 这里的info.file.originFileObj 类型有bug
			this.getBase64(info.file.originFileObj, (imageUrl: string) => {
				this.setState({
					loading: false,
					imageUrl
				});
			});
		}
	};

	handleSubmit = () => {
		let userInfo = this.props.form.getFieldsValue();
		this.props.form.validateFields((err, values) => {
			if (!err) {
				message.success(`${userInfo.userName} 注册成功,当前密码为${userInfo.userPwd}`);
			}
		});
	};

	render() {
		const { getFieldDecorator } = this.props.form;
		const formItemLayout: FormItemProps = {
			labelCol: {
				xs: {
					span: 24
				},
				sm: {
					span: 2
				}
			},
			wrapperCol: {
				xs: {
					span: 24
				},
				sm: {
					span: 4
				}
			}
		};
		const offsetLayout: FormItemProps = {
			wrapperCol: {
				xs: {
					span: 24
				},
				sm: {
					span: 4,
					offset: 2
				}
			}
		};
		//范例
		// const formItemLayout: FormItemProps = {
		// 	label: (
		// 		<span>
		// 			{/* <span className="icon icon-edit"></span> */}
		// 			<span>用户名</span>
		// 		</span>
		// 	),
		// 	labelCol: {
		// 		xs: {
		// 			span: 24
		// 		},
		// 		sm: {
		// 			span: 2
		// 		}
		// 	},
		// 	wrapperCol: {
		// 		xs: {
		// 			span: 24
		// 		},
		// 		sm: {
		// 			span: 4
		// 		}
		// 	}
		// };
		const uploadButton = (
			<div>
				<Icon type={this.state.loading ? "loading" : "plus"} />
				<div className="ant-upload-text">Upload</div>
			</div>
		);
		const { imageUrl } = this.state;
		return (
			<div>
				<div style={{ textAlign: "center", color: "red" }}>
					<h1>Register Form</h1>
				</div>

				<Card title="注册表单" className="button-wrap">
					<Row>
						<Col span={24}>
							<Form layout="horizontal">
								<FormItem label="用户名" {...formItemLayout}>
									{getFieldDecorator("userName", {
										// initialValue: "Dean",
										rules: [
											{
												required: true,
												message: "用户名不能为空"
											},
											{
												min: 5,
												max: 10,
												message: "长度不在范围内"
											},
											{
												pattern: /^\w+$/g,
												message: "用户名必须为字母或数字"
											}
										]
									})(<Input prefix={<Icon type="user"></Icon>} type="text" placeholder="请输入用户名" />)}
								</FormItem>
								<FormItem label="密码" {...formItemLayout}>
									{getFieldDecorator("userPwd", {
										// initialValue: "Dean",
										rules: [
											{
												required: true,
												message: "密码不能为空"
											}
										]
									})(<Input prefix={<span className="icon icon-summary"></span>} type="password" placeholder="请输入密码" />)}
								</FormItem>
								<FormItem label="性别" {...formItemLayout}>
									{getFieldDecorator("sex", {
										initialValue: 1
									})(
										<RadioGroup>
											<Radio value={1}>男</Radio>
											<Radio value={2}>女</Radio>
										</RadioGroup>
									)}
								</FormItem>
								<FormItem label="年龄" {...formItemLayout}>
									{getFieldDecorator("age", {
										initialValue: 18
									})(<InputNumber></InputNumber>)}
								</FormItem>
								<FormItem label="婚姻状况" {...formItemLayout}>
									{getFieldDecorator("marital", {
										// initialValue: ""
									})(
										<Select placeholder="请点击下拉框">
											<Option value={1}>未婚</Option>
											<Option value={2}>已婚</Option>
										</Select>
									)}
								</FormItem>
								<FormItem label="兴趣爱好" {...formItemLayout}>
									{getFieldDecorator("marital", {
										initialValue: [9]
									})(
										<Select placeholder="请点击下拉框" mode="multiple">
											<Option value={1}>篮球</Option>
											<Option value={2}>足球</Option>
											<Option value={3}>乒乓球</Option>
											<Option value={4}>唱歌</Option>
											<Option value={5}>跳舞</Option>
											<Option value={6}>游泳</Option>
											<Option value={7}>读书</Option>
											<Option value={8}>旅游</Option>
											<Option value={9}>其他</Option>
										</Select>
									)}
								</FormItem>
								<FormItem label="健康状况" {...formItemLayout}>
									{getFieldDecorator("isHealth", {
										valuePropName: "checked",
										initialValue: true
									})(<Switch checkedChildren="是" unCheckedChildren="否" />)}
								</FormItem>
								<FormItem label="生日" {...formItemLayout}>
									{getFieldDecorator("birthday", {
										// initialValue: moment(new Date())
										initialValue: moment("2020/1/4")
									})(<DatePicker showTime={{ format: "HH:mm" }} format="YYYY-MM-DD HH:mm"></DatePicker>)}
								</FormItem>
								<FormItem label="居住住址" {...formItemLayout}>
									{getFieldDecorator("address", {
										initialValue: "武汉市江夏区"
									})(<TextArea autosize={{ minRows: 3, maxRows: 5 }} />)}
								</FormItem>
								<FormItem label="上班时间" {...formItemLayout}>
									{getFieldDecorator("officeHours", {
										initialValue: moment("08:30", "HH:mm")
									})(<TimePicker format="HH:mm" />)}
								</FormItem>
								<FormItem label="上传头像" {...formItemLayout}>
									{getFieldDecorator("imageUrl", {
										// initialValue: ''
									})(
										<Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" showUploadList={false} listType="picture-card" onChange={this.handleChange}>
											{imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: "100%" }} /> : uploadButton}
										</Upload>
									)}
								</FormItem>
								<FormItem {...offsetLayout}>
									{getFieldDecorator("remember", {
										valuePropName: "checked",
										initialValue: true
									})(<Checkbox>是否遵守协议</Checkbox>)}
									<a href="javascript:void(0);">阅读协议详细内容</a>
								</FormItem>
								<FormItem {...offsetLayout}>
									<Button type="primary" onClick={this.handleSubmit}>
										注册
									</Button>
								</FormItem>
							</Form>
						</Col>
					</Row>
				</Card>
			</div>
		);
	}
}

export default Form.create<IProp & FormComponentProps>()(RegisterForm);
